<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="common/common">

<div class="centerView" data-type="widgets" th:fragment="content">
    <style>[class*=am-u-]+[class*=am-u-]:last-child{float:left}</style>
    <!-- 内容区域 -->
    <div class="tpl-content-wrapper" id="userinfo">
        <div class="row-content am-cf">

            <div class="row">

                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title am-fl">个人信息</div>

                        </div>
                        <div class="widget-body am-fr">

                            <form class="am-form tpl-form-line-form">
                                <div class="am-form-group">
                                    <label for="username" class="am-u-sm-3 am-form-label">用户名</label>
                                    <div class="am-u-sm-6">
                                        <input type="text" class="tpl-form-input" id="username" v-bind:value="user.username" readonly="readonly">

                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="realname" class="am-u-sm-3 am-form-label">员工姓名 </label>
                                    <div class="am-u-sm-6">
                                        <input type="text" class="tpl-form-input" id="realname" v-bind:value="user.realname" readonly="readonly">
                                    </div>
                                </div>


                                <div class="am-form-group">
                                    <label for="department" class="am-u-sm-3 am-form-label">部门 </label>
                                    <div class="am-u-sm-6">
                                        <input type="text" class="tpl-form-input" id="department"
                                               v-for="department in departments" v-if="department.id==user.departmentId" v-bind:value="department.department" readonly="readonly">
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="position" class="am-u-sm-3 am-form-label">职位 </label>
                                    <div class="am-u-sm-6">
                                        <input type="text" class="tpl-form-input" id="position"
                                               v-for="position in positions" v-if="position.id==user.positionId" v-bind:value="position.position" readonly="readonly">
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="sex" class="am-u-sm-3 am-form-label">性别</label>
                                    <div class="am-u-sm-6">
                                        <input type="text" class="tpl-form-input" id="sex" v-if="userinfo.sex==1" value="男" readonly="readonly">
                                        <input type="text" class="tpl-form-input" id="sex" v-else-if="userinfo.sex==2" value="女" readonly="readonly">
                                        <input type="text" class="tpl-form-input" id="sex" v-else value="人妖" readonly="readonly">

                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="bir" class="am-u-sm-3 am-form-label">生日</label>
                                    <div class="am-u-sm-6">
                                        <input type="text" class="tpl-form-input" id="bir" v-bind:value="userinfo.birthday" readonly="readonly">

                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="age" class="am-u-sm-3 am-form-label">年龄</label>
                                    <div class="am-u-sm-6">
                                        <input type="text" class="tpl-form-input" id="age" v-bind:value="userinfo.age" readonly="readonly">

                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="idcard" class="am-u-sm-3 am-form-label">身份证</label>
                                    <div class="am-u-sm-6">
                                        <input type="text" class="tpl-form-input" id="idcard" v-bind:value="userinfo.identityCard" readonly="readonly">
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="email" class="am-u-sm-3 am-form-label">E-mail</label>
                                    <div class="am-u-sm-6">
                                        <input type="text" class="tpl-form-input" id="email" v-bind:value="userinfo.email" readonly="readonly">
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="qq" class="am-u-sm-3 am-form-label">QQ</label>
                                    <div class="am-u-sm-6">
                                        <input type="text" class="tpl-form-input" id="qq" v-bind:value="userinfo.qq" readonly="readonly">
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="wechat" class="am-u-sm-3 am-form-label">微信</label>
                                    <div class="am-u-sm-6">
                                        <input type="text" class="tpl-form-input" id="wechat" v-bind:value="userinfo.wechat" readonly="readonly">
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="weibo" class="am-u-sm-3 am-form-label">微博</label>
                                    <div class="am-u-sm-6">
                                        <input type="text" class="tpl-form-input" id="weibo" v-bind:value="userinfo.weibo" readonly="readonly">
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="phone" class="am-u-sm-3 am-form-label">电话号码</label>
                                    <div class="am-u-sm-6">
                                        <input type="text" class="tpl-form-input" id="phone" v-bind:value="userinfo.phone" readonly="readonly">
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <div class="am-u-sm-6 am-u-sm-push-3">
                                        <a type="button" class="am-btn am-btn-primary tpl-btn-bg-color-success " href="user/user">返回
                                        </a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
    <script th:src="@{/js/userinfo_detail.js}"></script>
    <script>
        $(document).ready(function () {
            $('#userA').attr('class', 'active');
        });
    </script>
</div>
</html>